/// 页面 * CRUD Demo Tsx

import { Input } from 'ant-design-vue'
import {
  AddModal,
  type AddModalProps,
  DetailModal,
  type DetailModalProps,
} from './components'
import {
  type Site,
  type SiteParmas,
  apiDeleteSite,
  apiQuerySitePage,
} from '@/apis/system/project/Site'
import { Page } from '@/components'
import { isSucceed } from '@/helpers'

//# 类型

type RowData = Site
type SearchModel = SiteParmas

//# 定义

/**
 * CRUD Demo Txt
 */
export default genComponent({ name: 'CrudDemoTsx' }, () => {
  //# 成员

  /** 加载器 */
  const loading = useLoading()

  //// 弹框 ////

  /** 弹框-新增 */
  const addDialog = useDialog<AddModalProps['params']>()
  //|
  /** 弹框-详情 */
  const detailDialog = useDialog<DetailModalProps['params']>()

  //// 搜索栏 ////

  /** 搜索栏 */
  const searchbar = useSearchbar<SearchModel>({
    btns() {
      loading(grid.api.request(1))
      // grid.api.scrollToRow(grid.data.slice(-1)[0])
    },
  })

  //// 表格 ////

  /** 表格 */
  const grid = useGrid<RowData, SearchModel>({
    searchbar,
    data: [],
    scrollY: {
      enabled: true,
      gt: 0,
    },
    columns: [
      columnSeq(),
      column('站点名称', 'siteName', 180),
      column('所属项目', 'projectName', 240, { sortable: true }),
      column('所属系统', 'systemName', [180], {
        renderer(params) {
          return (
            <div>
              {params.cellView}
            </div>
          )
        },
      }),
      column('所属分组', 'groupName', [100]),
      column('操作人员', 'updateBy', [120]),
      column('修改时间', 'updateTime', [160]),
      columnAction({
        detail: [
          (params) => {
            console.log('detail', params, params.cellValue)
            openDialog(detailDialog, {
              title: '站点详情',
              params: {
                id: params.cellValue,
              },
            })
          },
          {
            danger: true,
            hide(params) {
              return params.cellValue === '1714358327302'
            },
          },
        ],
        edit(params) {
          console.log('edit', params)
          openDialog(addDialog, {
            title: '编辑站点',
            params: {
              action: 'edit',
              id: params.cellValue,
            },
            onOk() {
              addDialog.onCancel()
              loading(grid.api.request)
            },
          })
        },
        remove: {
          onClick(params) {
            console.log('del', params)
            Message.confirm('remove', () => {
              loading(async () => {
                const res = await apiDeleteSite(params.cellValue)
                if (isSucceed(res)) {
                  await grid.api.request()
                }
              })
            })
          },
        },
        more: {
          field: 'siteName',
          render: ['dropdownBtns', {
            title: '更多',
            field: 'siteName',
            items: [
              {
                key: 'enable',
                title: '启用',
                onClick(params) {
                  console.log('启用', params)
                },
              },
              {
                key: 'disable',
                title: '禁用',
                onClick(params) {
                  console.log('禁用', params)
                },
              },
            ],
          }],
        },
      }, ['siteId', 260]),
    ],
    async queryPage(params) {
      const { total, list } = await apiQuerySitePage(params)
      return { total, list }
    },

    tools: {
      add() {
        openDialog(addDialog, {
          title: '新增站点',
          params: {
            action: 'add',
          },
          onOk() {
            addDialog.onCancel()
            loading(grid.api.request)
          },
        })
      },
    },
  })

  //# 周期

  onMounted(() => {
    loading(grid.api.request)
  })

  //# 渲染

  return () => (
    <Page>
      {/* 搜索栏 */}
      <ExSearchbar {...searchbar.bind}>
        {/* 搜索项-站点名称 */}
        <ExSearchbar.Item label="站点名称" name="siteName">
          <Input />
        </ExSearchbar.Item>
      </ExSearchbar>

      {/* 表格 */}
      <ExGrid {...grid.bind} />

      {/* 弹框-新增 */}
      <ExDialog {...addDialog}>
        <AddModal {...addDialog} />
      </ExDialog>
      {/* 弹框-详情 */}
      <ExDialog {...detailDialog}>
        <DetailModal {...detailDialog} />
      </ExDialog>
    </Page>
  )
})
